import React, { FC, ReactElement, useEffect } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { useCityStoreProvide } from '@/store';

const ServiceManagement: FC = (): ReactElement => {
  const routeLocation = useLocation();
  const routeNavigate = useNavigate();
  const { refreshAllCities } = useCityStoreProvide();

  useEffect(() => {
    const base = '/service';

    if (!routeLocation.pathname.split(base)?.[1]) {
      routeNavigate(`${base}/fields-goods`);
    }
  }, [routeLocation.pathname, routeNavigate]);

  useEffect(() => {
    refreshAllCities();
  }, []);

  return (
    <Outlet />
  );
};

export default ServiceManagement;
